<template>
  <div class="good-item">
    <div>
      <div class="good-img">
        <router-link :to="'goodsDetails?productId='+msg.id">
          <img v-lazy="msg.image" :alt="msg.name">
        </router-link>
      </div>
      <h6 class="good-title">{{ msg.name }}</h6>
      <h3 class="sub-title ellipsis">{{ msg.mainType }}</h3>
      <div class="good-price pr">
        <div class="ds pa">
          <router-link :to="'goodsDetails?productId='+msg.id">
            <y-button text="查看详情" style="margin: 0 5px" />
          </router-link>
          <y-button
            text="加入购物车"
            style="margin: 0 5px"
            class-style="main-btn"
            @btnClick="handleAddCart(msg.id,msg.prices,msg.name,msg.image)"
          />
        </div>
        <p><span style="font-size: 16px">￥</span>
          {{ msg.prices }}</p>
      </div>
    </div>
  </div>
</template>
<script>
import YButton from '@/components/YButton'
import { addCart } from '@/api/cart'
import { mapMutations, mapState } from 'vuex'
export default {

  components: {
    YButton
  },
  props: {
    msg: {
      type: [Object, Array],
      default() {}
    }
  },
  data() {
    return {}
  },

  computed: {
    ...mapState(['login', 'showMoveImg', 'showCart'])
  },
  mounted() {
  },
  methods: {
    ...mapMutations(['ADD_CART', 'ADD_ANIMATION', 'SHOW_CART']),
    goodsDetails(id) {
      this.$router.push({ path: 'goodsDetails/productId=' + id })
    },
    handleAddCart(id, price, name, img) {
      if (!this.showMoveImg) { // 动画是否在运动
        if (this.login) { // 登录了 直接存在用户名下
          addCart({ productId: id, productName: name, productImg: img, productPrice: price }).then(res => {
            // 并不重新请求数据
            this.ADD_CART({ productId: id, productPrice: price, productName: name, productImg: img })
          })
        } else { // 未登录 vuex
          this.ADD_CART({ productId: id, productPrice: price, productName: name, productImg: img })
        }
        // 加入购物车动画
        const dom = event.target
        // 获取点击的坐标
        const elLeft = dom.getBoundingClientRect().left + (dom.offsetWidth / 2)
        const elTop = dom.getBoundingClientRect().top + (dom.offsetHeight / 2)
        // 需要触发
        this.ADD_ANIMATION({ moveShow: true, elLeft: elLeft, elTop: elTop, img: img })
        if (!this.showCart) {
          this.SHOW_CART({ showCart: true })
        }
      }
    }
  }
}
</script>
<style lang="scss" rel="stylesheet/scss" scoped>
  @import "../assets/style/mixin";
  @import "../assets/style/theme";

  .good-item {
    background: #fff;
    width: 25%;
    transition: all .5s;
    height: 430px;
    &:hover {
      transform: translateY(-3px);
      box-shadow: 1px 1px 20px #999;
      .good-price p {
        display: none;
      }
      .ds {
        display: flex;
      }
    }
    .ds {
      @extend %block-center;
      width: 100%;
      display: none;
    }

    .good-img {
      img {
        margin: 50px auto 10px;
        @include wh(206px);
        display: block;
      }
    }
    .good-price {
      margin: 15px 0;
      height: 30px;
      text-align: center;
      line-height: 30px;
      color: #e4393c;
      font-size: 20px;
    }
    .good-title {
      line-height: 1.2;
      font-size: 16px;
      color: #424242;
      margin: 0 auto;
      padding: 0 14px;
      text-align: center;
      overflow: hidden;
    }
    h3 {
      text-align: center;
      line-height: 1.2;
      font-size: 12px;
      color: #d0d0d0;
      padding: 10px;
    }

  }
</style>
